<template>
  <user-card-list :user-list="userList" /> <!-- user-list == userList -->
  <van-empty v-if="!userList||userList<1" description="搜索结果为空" />
</template>

<script setup>
import {onMounted, ref} from 'vue';
import {useRoute, useRouter} from "vue-router";
import {Toast} from "vant";
import myAxios from "../plugins/myAxios";
import qs from 'qs';
import UserCardList from "../components/UserCardList.vue";

const router = useRouter();
const route = useRoute();
const {tags} = route.query;

const userList = ref([]);

onMounted( async () => {
  const userListData = await myAxios.get('/user/search/tags', {
    params: {
      tagNameList: tags
    },
    paramsSerializer: params => {// list
      return qs.stringify(params, {indices: false})
    }
  })
  .then(function (response) {
    console.log(`/user/earch/tags`,response);
    return response.data;
  })
  .catch(function (error) {
    console.log(`/user/earch/tags error`,error);
    Toast.fail('请求失败');
  });
  if(userListData){
    userListData.forEach(user => {
      if(user.tags){
        user.tags = JSON.parse(user.tags)
      }
    })
    userList.value = userListData;
  }
})


//
// const mockUser = {
//   id: 12345,
//   username: "善良",
//   userAccount: "123",
//   profile: '一名怄气流失收到，操作票打算放弃法制频道吧，按批发价你留着啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊ok',
//   avatarUrl: 'https://p3.ssl.qhimg.com/t011e94f0b9ed8e66b0.png',
//   gender: 0,
//   phone: '17852662690',
//   email: '123@qq.com',
//   userRole: 0,
//   planetCode: '1234',
//   tags: ['java','emo','打工中','学习中','emo','打工中','学习中'],
//   createTime: new Date(),
// }

</script>

<style scoped>

</style>